<template>
  <div>
    <!-- 单个商品详情 -->
    <div class="details_header">
      <div class="header_logo">
        <van-icon @click="back" name="arrow-left" size="0.4rem" />
      </div>
      <div class="header_title">商品详情页</div>
    </div>
    <div class="details_body">
      <!-- 轮播 -->
      <van-swipe
        class="my-swipe"
        :autoplay="2000"
        indicator-color="white"
        style="width: 100%;margin-top: 45px;"
      >
        <van-swipe-item v-for="(item,index) in details.pics" :key="index">
          <img :src="item.pic" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <div class="details_basicInfo">
        <p class="details_basicInfo_name">
          <!-- name商品名称 -->
          {{basicInfo.name}}
        </p>
        <p class="details_basicInfo_characteristic">
          <!-- characteristic	商品特色、卖点 -->
          {{basicInfo.characteristic}}
        </p>
        <p class="details_basicInfo_price">
          <span>
            <!-- minPrice	当前价格 -->
            低价:{{basicInfo.minPrice}}
            <!-- originalPrice商品原价 -->
            原价:{{basicInfo.originalPrice}}
          </span>
          <span>
            <!-- stores总库存数 -->
            库存:{{basicInfo.stores}}
          </span>
        </p>
      </div>
      <!-- 分割线 -->
      <van-divider style="background-color: #fff;color:#999" content-position="center">商品详情</van-divider>
      <!-- 商品详情 -->
      <div v-html="details.content" class="details_content"></div>
      <!-- 底部导航 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart" />
        <van-goods-action-button type="warning" text="加入购物车" @click="onClick(basicInfo)" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    details: function() {
      return this.$store.state.detailsModule.detailsItems;
    },
    basicInfo: function() {
      return this.$store.state.detailsModule.basicInfoItems;
    }
  },
  mounted() {
    let id = this.$route.query.id;
    this.$store.dispatch("getDetailsList", id);
  },
  methods: {
    back() {
      //返回事件
      window.history.back();
    },
    goCart() {
      //跳转到购物车页面
      this.$router.push({
        path: "/cart"
      });
    },
    onClick(item) {
      //添加购物车
      this.$store.dispatch("addItemToCart",item);
    }
  }
};
</script>

<style scoped>
.details_header {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: left;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 7;
}
.header_logo {
  width: 20%;
  margin-left: 5%;
  text-align: left;
  line-height: 1.2rem;
}
.header_title {
  width: 60%;
  text-align: center;
  line-height: 1rem;
  font-size: 0.4rem;
}
.details_body {
  margin-top: 1.1rem;
}
.details_body img {
  width: 100%;
  height: 7rem;
}

.details_basicInfo {
  width: 100%;
}
.details_basicInfo_name {
  font-size: 0.4rem;
}
.details_basicInfo_characteristic {
  color: #999;
}
.details_basicInfo_price {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.details_content >>> img {
  width: 100% !important;
  height: 100% !important;
}
</style>
